<template>
  <div>
    <!-- 标题 -->
    <el-row>
      <el-col :span="6">
        <div id="title">
          <i class="el-icon-shopping-bag-2"></i>
          <b>物品交易管理</b>
        </div>
      </el-col>
      <!-- 搜索投诉内容 -->
      <el-col :span="14">
        <el-col :span="18">
          <el-input v-model="inputName"
                    size="small"
                    placeholder="搜索内容"
                    @keyup.enter.native="search(inputName)">
          </el-input>
        </el-col>
        <el-col :span="6"></el-col>
      </el-col>
      <el-col :span="4">
        <!-- 批量删除 -->
        <el-button type="danger"
                   size="small"
                   @click="delectAll(handleSelectionChange)">批量删除
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="商品名称"
                       prop="goodsName"
                       align="center"
                       width="100"></el-table-column>
      <el-table-column label="商品图片"
                       prop="image"
                       align="center"
                       width="80">
        <template slot-scope="td">
          <img :src="td.row.image"
               style="width:50px;height:50px;" />
        </template>
      </el-table-column>

      <el-table-column label="出售者"
                       prop="name"
                       align="center"></el-table-column>
      <el-table-column label="顾客名称"
                       prop="customer"
                       align="center"
                       width="150"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="订单备注"
                       prop="information"
                       align="center"
                       width="300"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="创建时间"
                       prop="createtime"
                       align="center"
                       width="180"></el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="td">
          <!-- 删除 -->
          <el-button type="danger"
                     size="mini"
                     @click="del(td.$index,td.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
//导入axios
import axios from '../../../axios_config'
import Commons from '../../../js/commons'

export default {
  data () {
    return {
      tableData: [],           //表格数据
      currentComment: {},      //当前评论
      currentPage: 1,          //当前页
      total: 0,                //总条数
      totalPage: 0,            //总页数
      size: 5,                 //每一页大小
      multipleSelection: [],   //每一行数据的选择框
      inputName: "",           //搜索栏内容
    }
  },
  methods: {
    //模糊查询
    search (inputName) {
      this.inputName = inputName;
      this.currentPage = 1;
      this.findByPage();
    },
    //删除单行
    del (index, row) {
      this.$confirm('您确定要删除该条记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        //从表格中删除当行数据
        this.tableData.splice(index, 1);
        //row.id 才是数据库中的id
        axios.get("http://192.168.11.18:8080/goodsOrder/deleteOrder?id=" + row.id)
          .then(res => {
            console.log(res);
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //批量删除
    delectAll () {
      this.$confirm('您确定要删除选中记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length != 0) {
          //后台删除  
          for (let j = 0; j < this.multipleSelection.length; j++) {
            //数据库中的真正的评论id
            let id = this.multipleSelection[j].id;
            //发送请求将status改为1
            axios.get("http://192.168.11.18:8080/goodsOrder/deleteOrder?id=" + id)
              .then(res => {

              })
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //前端删除
          for (let i = 0; i < this.tableData.length; i++) {
            const element = this.tableData[i];
            element.id = i
          }
          this.multipleSelection.forEach(element => {
            this.tableData.forEach((e, i) => {
              if (element.id == e.id) {
                this.tableData.splice(i, 1)
              }
            });
          });
        } else {
          this.$message.error('请先至少选择一项');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //多选框将选中数据赋给全局变量
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },



    //根据页码查询当前页数据
    findByPage () {
      axios.get("http://192.168.11.18:8080/goodsOrder/selectGoodsOrder/?page=" + this.currentPage + "&size=" + this.size + "&information=" + this.inputName + "&result=5")
        .then(res => {
          console.log(res);
          //评论信息
          this.tableData = res.data.data;
          //分页数据
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.pageSize;
        });
    },
    //修改每一页大小
    handleSizeChange (size) {
      //   console.log("选择" + size);
      //   this.inputName = '';
      this.size = size;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //选择第几页
    handleCurrentChange (page) {
      //   console.log("选择:" + page + "页");
      this.currentPage = page;
      //   this.inputName = '';
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },
  },
  mounted () {
    this.findByPage()
  }
}
</script>

<style scoped>
#title {
  margin-left: 10px;
  font-size: 20px;
}
</style>